<template>
  <div class="dip-angle">
    <img ref="pointer" src="../../assets/images/ico_pointer@3x.png" alt="pointer">
    <svg
      width="99px"
      height="26px"
      viewBox="0 0 99 26"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
      <title>Group 10@3x</title>
      <desc>Created with Sketch.</desc>
      <defs>
        <linearGradient
          x1="100%"
          y1="64.6201072%"
          x2="0%"
          y2="64.6201072%"
          id="linearGradient-1"
        >
          <stop
            stop-color="#3581FB"
            stop-opacity="0.3"
            offset="0%"
          ></stop>
          <stop
            stop-color="#3581FB"
            offset="49.5616763%"
          ></stop>
          <stop
            stop-color="#3581FB"
            stop-opacity="0.3"
            offset="100%"
          ></stop>
        </linearGradient>
        <linearGradient
          x1="97.7144998%"
          y1="85.7063912%"
          x2="1.2485517%"
          y2="100%"
          id="linearGradient-2"
        >
          <stop
            stop-color="#FFFFFF"
            stop-opacity="0"
            offset="0%"
          ></stop>
          <stop
            stop-color="#FFFFFF"
            offset="50.8165769%"
          ></stop>
          <stop
            stop-color="#FFFFFF"
            stop-opacity="0"
            offset="100%"
          ></stop>
        </linearGradient>
        <linearGradient
          x1="0%"
          y1="0%"
          x2="100%"
          y2="0%"
          id="linearGradient-3"
        >
          <stop
            stop-color="#3581fb"
            offset="0%"
          />
          <stop
            stop-color="#41badc"
            offset="50.8165769%"
          />
          <stop
            stop-color="#4ac8bb"
            offset="100%"
          />
        </linearGradient>
      </defs>
      <g
        id="Page-1"
        stroke="none"
        stroke-width="1"
        fill="none"
        fill-rule="evenodd"
      >
        <g
          id="设备"
          transform="translate(-449.000000, -810.000000)"
          fill-rule="nonzero"
        >
          <g
            id="Group-6"
            transform="translate(420.000000, 789.000000)"
          >
            <g
              id="Group-10"
              transform="translate(27.000000, 21.000000)"
            >
              <path
                d="M54.1997352,8.04544556 L55.1997352,8.04544556 L55.1997352,14.1210523 L54.1997352,14.1210523 L54.1997352,8.04544556 Z M57.4544987,8.1287478 L58.4543464,8.14620021 L58.3483124,14.2208816 L57.3484647,14.2034292 L57.4544987,8.1287478 Z M60.7073126,8.26884081 L61.7067034,8.30374031 L61.4946678,14.375646 L60.495277,14.3407465 L60.7073126,8.26884081 Z M63.9571861,8.46568192 L64.9558157,8.51801787 L64.637843,14.5852982 L63.6392134,14.5329622 L63.9571861,8.46568192 Z M67.3726545,8.72513111 L68.3702186,8.79488758 L67.6073553,19.7043399 L66.6097913,19.6345835 L67.3726545,8.72513111 Z M70.4441535,9.0293513 L71.4403482,9.11650704 L70.9108242,15.1689943 L69.9146295,15.0818385 L70.4441535,9.0293513 Z M73.6792713,9.39600788 L74.6737932,9.50053634 L74.0387194,15.5428603 L73.0441975,15.4383318 L73.6792713,9.39600788 Z M76.9074974,9.81906921 L77.9000435,9.94093855 L77.1596133,15.9712586 L76.1670672,15.8493893 L76.9074974,9.81906921 Z M80.1278484,10.2984064 L81.1181164,10.4375795 L80.2725554,16.4540589 L79.2822873,16.3148858 L80.1278484,10.2984064 Z M83.719517,10.8637938 L84.7072053,11.0202283 L82.9964236,21.821679 L82.0087352,21.6652445 L83.719517,10.8637938 Z M86.5410038,11.4253073 L87.5258116,11.5989555 L86.4707935,17.5822601 L85.4859858,17.4086119 L86.5410038,11.4253073 Z M89.7318548,12.0725278 L90.713482,12.2633368 L89.5542016,18.2273175 L88.5725744,18.0365085 L89.7318548,12.0725278 Z M92.9109243,12.7753377 L93.8890719,12.9832493 L92.6258822,18.9260895 L91.6477346,18.7181778 L92.9109243,12.7753377 Z M96.0772439,13.5335229 L97.0516139,13.758474 L95.6848998,19.6783633 L94.7105297,19.4534122 L96.0772439,13.5335229 Z M99.8177779,14.4190412 L100.788074,14.6609631 L98.1423935,25.2722065 L97.1720978,25.0302846 L99.8177779,14.4190412 Z M1.99583328,14.4981213 L2.95709498,14.222484 L5.97149049,24.7349304 L5.0102288,25.0105678 L1.99583328,14.4981213 Z M5.81733961,13.5869187 L6.78326543,13.3280997 L8.35574817,19.1966851 L7.38982234,19.4555042 L5.81733961,13.5869187 Z M8.9827599,12.8249877 L9.95305562,12.5830658 L11.4228779,18.4782011 L10.4525822,18.720123 L8.9827599,12.8249877 Z M12.1609956,12.118417 L13.1353657,11.8934659 L14.5020798,17.8133553 L13.5277097,18.0383063 L12.1609956,12.118417 Z M15.3510786,11.4674217 L16.3292262,11.25951 L17.5924159,17.2023502 L16.6142683,17.4102619 L15.3510786,11.4674217 Z M18.088325,10.9168507 L19.0699522,10.7260417 L21.156657,21.461207 L20.1750298,21.652016 L18.088325,10.9168507 Z M21.7628963,10.3329339 L22.7477041,10.1592857 L23.8027221,16.1425903 L22.8179143,16.3162385 L21.7628963,10.3329339 Z M24.9826779,9.84978681 L25.9703662,9.69335234 L26.9208005,15.6941583 L25.9331122,15.8505927 L24.9826779,9.84978681 Z M28.2104011,9.42290628 L29.2006692,9.28373318 L30.0462302,15.3002125 L29.0559622,15.4393856 L28.2104011,9.42290628 Z M31.4450829,9.05242231 L32.437629,8.93055296 L33.1780592,14.960873 L32.1855131,15.0827424 L31.4450829,9.05242231 Z M34.4317083,8.75176086 L35.4262302,8.6472324 L36.5693631,19.5234155 L35.5748412,19.6279439 L34.4317083,8.75176086 Z M37.9313788,8.48107822 L38.9275735,8.39392248 L39.4570975,14.4464097 L38.4609028,14.5335654 L37.9313788,8.48107822 Z M41.1810172,8.28039215 L42.1785812,8.21063567 L42.6023941,14.2714425 L41.6048301,14.341199 L41.1810172,8.28039215 Z M44.4336631,8.13645065 L45.4322926,8.08411469 L45.7502653,14.151395 L44.7516358,14.203731 L44.4336631,8.13645065 Z M47.6883257,8.04929757 L48.6877165,8.01439807 L48.8997521,14.0863037 L47.9003613,14.1212032 L47.8356643,12.2685234 L47.6883257,8.04929757 Z M50.9016001,8.0193296 L51.9014478,8.00187719 L52.0923089,18.9363037 L51.0924612,18.9537561 L50.9016001,8.0193296 Z"
                id="Rectangle-33"
                fill="url(#linearGradient-1)"
              ></path>
              <path
                d="M102.447856,7.00556821 L101.694658,9.90947816 C85.3427651,5.66822739 68.4194376,3.5 51.2088412,3.5 C34.2262631,3.5 17.5229875,5.61114538 1.37170961,9.7423909 L0.628290385,6.83596219 C17.0219881,2.64270947 33.9749971,0.5 51.2088412,0.5 C68.6741023,0.5 85.8505007,2.70065099 102.447856,7.00556821 Z"
                id="Oval-6"
                fill="url(#linearGradient-2)"
                opacity="0.537946429"
              ></path>
            </g>
          </g>
        </g>
      </g>
    </svg>
    <svg
      id="circle-box"
      width="100px"
      height="100px"
      viewBox="0 0 100 100"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <path
        ref="circle"
        id="circle"
        d="M 50 50 m 0 -47 a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 -94"
        stroke-linecap="round"
        stroke="url(#linearGradient-3)"
        fill="transparent"
      />
    </svg>
    <p class="tick">0</p>
    <p class="angle">{{angle}}°</p>
  </div>
</template>

<script>
export default {
  name: "Dip-Angle",
  props: {
    angle: {
      type: String,
      default: '10'
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    initData () {
      let domWidth = 100;
      let divisor = 12 / 15;
      let pointer_divisor = 50 / 15;
      let angle;
      let length;
      let pointer_length;
      let dom = this.$refs['circle']
      let pointer = this.$refs['pointer'];

      if (this.angle < 0) {
        dom.style.transform = 'scale(-4, 4)';
        angle = this.angle < -15 ? -15 : this.angle;
        length = angle * divisor;
        length = -length;
        pointer_length = angle * pointer_divisor - 4;
      } else if (this.angle > 0) {
        angle = this.angle > 15 ? 15 : this.angle;
        length = angle * divisor;
        pointer_length = angle * pointer_divisor + 4;
      } else {
        angle = this.angle > 15 ? 15 : this.angle;
        length = angle * divisor;
        pointer_length = 0;
      }
      dom.style.strokeDasharray = 150 + length  + 'px, 300px';
      pointer.style.transform = 'rotate(' + angle + 'deg) translateX(' + pointer_length + 'px)';
    }
  },
  watch: {
    angle: function() {
      this.initData()
    }
  }
};
</script>

<style lang="scss">
.dip-angle {
  position: relative;
  text-align: center;

  img {
    width: 16px;
    transform: rotate(6deg);
  }

  p.tick {
    width: 100%;
    text-align: left;
    position: absolute;
    top: 40px;
    left: 45px;
    font-size: 10px;
    color:#a3b4cc;
    text-indent: 8px;

    &:before {
      content: '-15';
      position: absolute;
      transform: translateX(-60px);
    }

    &:after {
      content: '15';
      position: absolute;
      transform: translateX(30px);
    }
  }
  p.angle {
    width: 100%;
    position: absolute;
    top: 56px;
    font-size:20px;
    color:#ffffff;
  }
}
#circle {
  transform-origin: center top;
  transform: scale(4);
  stroke-width: 1;
  stroke-dashoffset: 150px;
  stroke-dasharray: 160px, 300px;
}
#circle-box {
  transform: translateY(-39px);
}
</style>
